<template>
  <el-table ref="mytables"
  :empty-text="emptyText"
            :size="size"
            :data="tableData"
            header-row-class-name="myThead"
            :border="border"
            :style="mystyle"
            v-loading="loading"
            :max-height="maxHeight"
            @selection-change="handleSelectionChange"
            @select="selected"
            @select-all="selectAll"
            :span-method="arraySpanMethod">
    <el-table-column :resizable="false"
                     type="selection"
                     :selectable="selectRow"
                     width="45"
                     v-if="canSelect"></el-table-column>
    <template v-for="(item,index) in tableCol">
      <slot v-if="item.slot"
            :name="item.slot"></slot>
      <el-table-column v-else
                       :resizable="false"
                       header-align="center"
                       :key="index"
                       :prop="item.prop"
                       :label="item.label"
                       :align="item.align?item.align:'center'"
                       :width="item.width"></el-table-column>
    </template>
    <slot></slot>
  </el-table>
</template>

<script>
export default {
  props: {
    canSelect: { type: Boolean, default: false },
    tableCol: { type: Array, default: () => [] },
    tableData: { type: Array, default: () => [] },
    mystyle: { type: Object, default: () => { } },
    merge: { type: Boolean, default: false },
    size: { type: String, default: '' },
    border: { type: Boolean, default: true },
    maxHeight: { type: String, default: '10000' },
    loading: { type: Boolean, default: false },
    emptyText: { type: String, default: '暂无数据' },
  },
  methods: {
    // 判断当前行是否可选
    selectRow (row, index) {
      if (row.notSelect) {
        return false;
      }
      return true;
    },
    // 当选择项发生变化时会触发
    handleSelectionChange (val) {
      this.$emit('signle-select', val);
    },
    // 用户手动勾选数据行的 Checkbox 时触发
    selected(selection, row) {
      this.$emit('selected', { selection, row });
    },
    // 当用户手动勾选全选 Checkbox 时触发的事件
    selectAll(selection, row) {
      this.$emit('selectAll', { selection, row });
    },
    // rows选中的值
    toggleSelection (rows) {
      if (rows) {
        this.$nextTick(() => {
          this.$refs.mytables.toggleRowSelection(rows, true);
        });
      }
    },
    /** 合并列
     * @param row 当前行
     * @param column 当前列
     * @param rowIndex 当前行号
     * @param columnIndex 当前列号
     */
    arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (this.merge) {
        if (rowIndex === 2) {
          if (columnIndex === 1) {
            return [1, 2];
          }
        }
      }
    },
    // 展开当前行
    openRow (row, expanded) {
      this.$refs.mytables.toggleRowExpansion(row, expanded);
    },
  },
};
</script>

<style lang="less">
body .el-table .el-table-column--selection .cell{
  padding:0 5px!important;
  width: 46px;
  text-align: center;
}
</style>
